import { Meta } from '@storybook/addon-docs'
import LinkTo from '@storybook/addon-links/react'

<Meta title="Addons/Drag and Drop/props/Full Prop List" />

# All Drag and Drops Props

### onEventDrop

- type: `function ({ event, start, end, allDay }) => any`
- <LinkTo kind="addons-drag-and-drop-props" story="on-event-drop">
    Example
  </LinkTo>

A callback fired when user drops an item from one slot to another from within the Calendar. Developers will typically use this method to update an item's `start` and `end` in <LinkTo kind="props" story="events">events</LinkTo>.

### onDragStart

- type: `function ({ event, action, direction }) => any`
- <LinkTo kind="addons-drag-and-drop-props" story="on-drag-start">
    Example
  </LinkTo>

A callback fired when user begins to drag an event.

### onDropFromOutside

- type: `function ({ start, end, allDay, resource }) => any`
- <LinkTo kind="addons-drag-and-drop-props" story="on-drop-from-outside">
    Example
  </LinkTo>

A callback fired when user drops an item onto the Calendar from outside of the Calendar. Developers will typically use this method to add new items to the Calendar's <LinkTo kind="props" story="events">events</LinkTo>.

**Important:** The callback does **not** receive the element being dropped. It only receives the details of the slot an element was dropped on.

### dragFromOutsideItem

- type: `function () => boolean`
- <LinkTo kind="addons-drag-and-drop-props" story="drag-from-outside-item">
    Example
  </LinkTo>

A callback to get a temporary `event` to display in a slot in the process of dragging from outside. This is not required for Drag and Drop to function, but provides a nice visual cue to the user when dragging in an item from outside of the Calendar.

Tip: Toggle the checkbox, in the example, and drag an outside item in. Do this from both checkbox states to see the difference in effect.

### onDragOver

- type: `function (dragEvent: SyntheticEvent) => any`
- <LinkTo kind="addons-drag-and-drop-props" story="on-drag-over">
    Example
  </LinkTo>

If an `onDragOver` callback _is_ passed, then it can discriminate as to whether a draggable item is droppable on the calendar. To designate a draggable item as droppable, call `event.preventDefault` inside `onDragOver`. If `event.preventDefault` is not called in the `onDragOver` callback, then the draggable item will not be droppable on the calendar.

### draggableAccessor

- type: `string|function (event) => boolean`
- default: `() => true`
- <LinkTo kind="addons-drag-and-drop-props" story="draggable-accessor">
    Example
  </LinkTo>

When used, can determine whether an 'event' is draggable

### resizable

- type: `boolean`
- default: `true`
- <LinkTo kind="addons-drag-and-drop-props" story="resizable">
    Example
  </LinkTo>

Determines if events may be resized on the Calendar. Used in conjunction with <LinkTo kind="addons-drag-and-drop-props" story="on-event-resize">onEventResize</LinkTo>. When used with the <LinkTo kind="addons-drag-and-drop-props" story="resizable-accessor">resizableAccessor</LinkTo> the developer has even greater control.

**Note:** `resizable` events must also be draggable. You cannot resize an event with a <LinkTo kind="addons-drag-and-drop-props" story="draggable-accessor">draggableAccessor</LinkTo> prop of `false`.

### onEventResize

- type: `function ({ event, start, end }) => any`
- <LinkTo kind="addons-drag-and-drop-props" story="on-event-resize">
    Example
  </LinkTo>

A callback fired when user resizes an event. Developers will typically use this method to update an item's `start` and `end` in <LinkTo kind="props" story="events">events</LinkTo>.

The <LinkTo kind="addons-drag-and-drop-props" story="resizable">resizable</LinkTo> prop must be `true` (the default) to use the method.

**Note:** `resizable` events must also be draggable. You cannot resize an event with a <LinkTo kind="addons-drag-and-drop-props" story="draggable-accessor">draggableAccessor</LinkTo> prop of `false`.

### resizableAccessor

- type: `string|function (event) => boolean`
- default: `() => true`
- <LinkTo kind="addons-drag-and-drop-props" story="resizable-accessor">
    Example
  </LinkTo>

Determines if an event is resizable.

**Note:** `resizable` events must also be draggable. You cannot resize an event with a <LinkTo kind="addons-drag-and-drop-props" story="draggable-accessor">draggableAccessor</LinkTo> prop of `false`.
